<template>
	<a-dropdown
		v-model="show"
		:trigger="['click']"
		placement="bottomLeft"
		overlayClassName="box-dropdown"
	>
		<!-- 按钮 -->
		<a-button class="width">
			<i class="word">{{ item ? item.attr.attrName : '总次数' }}</i>
			<a-icon type="caret-down" class="iconfont" />
		</a-button>
		<!-- 下拉 -->
		<template slot="overlay" @click="handleVisible">
			<div class="box-list">
				<a-input-search @search="onSearch" @change="handleChange" placeholder="请输入搜索" />
				<div class="tag">
					<a-tag
						color="blue"
						style="maigin-right: 10px"
						v-if="listData.eventAttrs.length > 0"
						@click="GoTop('event')"
					>
						事件属性
					</a-tag>
					<a-tag color="blue" v-if="listData.userAttrs.length > 0" @click="GoTop('user')">
						用户属性
					</a-tag>
				</div>
				<div class="box-menu" ref="elementHeight">
					<h3 class="title" name="eventsAttr" v-if="listData.eventAttrs.length > 0">事件属性</h3>
					<a-menu @click="changeConditionAttr($event, 'event')">
						<template>
							<a-menu-item
								v-for="o in listData.eventAttrs"
								:key="o.attrCode"
								:value="o.attrCode"
								:title="o.attrName"
								:role="o.dataType"
							>
								{{ o.attrName }}
								<a-icon type="check" class="check" />
							</a-menu-item>
						</template>
					</a-menu>
					<h3 class="title" v-if="listData.userAttrs.length > 0">用户属性</h3>
					<a-menu @click="changeConditionAttr($event, 'user')">
						<template>
							<a-menu-item
								v-for="o in listData.userAttrs"
								:key="o.attrCode"
								:value="o.attrCode"
								:title="o.attrName"
								:role="o.dataType"
							>
								{{ o.attrName }}
								<a-icon type="check" class="check" />
							</a-menu-item>
						</template>
					</a-menu>
				</div>
			</div>
		</template>
	</a-dropdown>
</template>

<script lang="ts">
import { Component, Prop, Watch, Emit, Vue } from 'vue-property-decorator'
import request from '@/utils/request'
import _ from 'lodash'
import { FieldsType } from '../type'

@Component({
	name: 'Condition',
	components: {}
})
export default class extends Vue {
	@Prop() item!: FieldsType
	@Prop() projectId!: number
	@Prop() eventCode!: string
	@Prop() pkey!: number // 条件的key
	@Prop() subkey!: number // 子条件的key
	@Prop() itemKey!: number // 指标的key
	@Prop() level!: string

	private lists: { name: string; remark: string }[] = []
	private listData: any = {}

	private show = false
	private goTop = 'event'
	// private goTop = false
	private conditionItem!: any

	mounted(): void {
		this.getConditionData()
	}
	private handleVisible() {
		this.show = true
	}
	private onSearch(value: string) {
		let resule: any = { eventAttrs: [], userAttrs: [] }
		if (!_.isEmpty(value)) {
			let searchWord = value?.trim()
			const eventRes = this.listData.eventAttrs.filter((obj: any) => {
				const { attrCode, attrName } = obj
				const regExp = new RegExp(searchWord, 'i')
				return regExp.test(attrCode) || regExp.test(attrName)
			})
			const userRes = this.listData.userAttrs.filter((obj: any) => {
				const { aggregatorCode, aggregatorAlias } = obj
				const regExp = new RegExp(searchWord, 'i')
				return regExp.test(aggregatorCode) || regExp.test(aggregatorAlias)
			})
			resule = { eventAttrs: eventRes, userAttrs: userRes }
			this.listData = _.cloneDeep(resule)
		}
	}
	private handleChange(e: any) {
		const { value } = e.target
		if (value === '') {
			this.listData = this.lists
		}
	}
	private GoTop(params: string) {
		this.goTop = params
		// console.log(this.$refs.elementHeigh) //offsetHeight
	}

	@Emit('changeConditionAttr')
	private changeConditionAttr(e: any, type: string) {
		return {
			e,
			type: type,
			level: this.level,
			pkey: this.pkey,
			subkey: this.subkey,
			itemKey: this.itemKey
		}
	}
	// 获取条件
	@Watch('projectId', { deep: true })
	@Watch('eventCode', { deep: true })
	private getConditionData() {
		request('reportservice/event/filtProperties', {
			method: 'GET',
			data: {
				projectId: this.projectId,
				eventCode: this.eventCode
			}
		}).then(({ data }) => {
			// console.log('this.projectId: ', this.projectId)
			// console.log('this.eventCode: ', this.eventCode)

			this.lists = data
			this.listData = _.cloneDeep(this.lists)
			// console.log('条件: ', data)
		})
	}
}
</script>
<style lang="scss" scoped>
.width {
	max-width: 105px;
	i {
		display: inline-block;
		height: 32px !important;
		line-height: 32px !important;
		font-style: inherit !important;
		&.word {
			width: 68px !important;
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
			text-align: left;
		}
		&.iconfont {
			height: 14px;
			position: absolute;
			top: 3px;
			right: 10px;
		}
	}
}
.box-list {
	width: 312px;
	height: 260px;
	box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.14);
	box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.12);
	box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2);
	background: #fff;

	.tag {
		margin: 10px 0;
		padding: 0 10px;
	}
	.title {
		color: #17233d;
		line-height: 30px;
		font-size: 14px;
		padding-left: 10px;
		display: flex;
		align-items: center;
		&::before {
			display: inline-block;
			content: '';
			height: 12px;
			width: 3px;
			margin-right: 10px;
			background: #2185f0;
		}
		&::after {
			display: inline-block;
			content: '';
			height: 1px;
			flex-grow: 1;
			margin-left: 8px;
			background: #e9f0f7;
		}
	}
	.box-menu {
		height: 180px;
		overflow-y: scroll;
		margin-top: 10px;
		// position: relative;
		.ant-menu {
			// position: absolute;
			.ant-menu-item {
				.check {
					display: none;
				}
				&:hover {
					background: rgba(45, 140, 240, 0.06);
				}
				&.ant-menu-item-selected {
					.check {
						display: inline-block;
						position: absolute;
						top: 12px;
						right: 10px;
					}
				}
			}
		}
	}
}
</style>
